import React from "react";

import logo1 from '../../assets/logo1.png'
import logo2 from '../../assets/logo2.png'
import logo3 from '../../assets/logo3.png'
import './index.css'

import { Link } from 'react-router-dom'
import { Menu, Dropdown, Avatar, Modal } from 'antd';
import { UserOutlined, DownOutlined, MailOutlined, WechatOutlined } from '@ant-design/icons';
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";
import PubSub from "pubsub-js";

// 邮箱弹框
function mail() {
  Modal.info({
    title: '欢迎致信',
    content: (
      <div>
        <p style={{color:'#fff'}}>QQ邮箱：1322625047@qq.com</p>
        <p style={{color:'#fff'}}>网易邮箱：laneveri1204@126.com</p>
      </div>
    ),
    onOk() {},
  });
}

// 微信弹框
function wechat() {
  Modal.info({
    title: '欢迎加微或加入团队',
    content: (
      <div>
        <p style={{color:'#fff'}}>手机号：19979611109</p>
        <p style={{color:'#fff'}}>团队公众号：四川大学智能医学中心</p>
      </div>
    ),
    onOk() {},
  });
}


export default class Top_Header extends React.Component{
    state = {
      username: memoryUtils.user.username,
      visible: false
    }

    logout = () => {
      this.setState({
        visible: true
      })
    }

    handleOk = () => {
      memoryUtils.user = {}
      storageUtils.removeUser()
      const flag = false
      PubSub.publish("sendLogoutParam", flag)
      this.setState({
        username: '',
        visible: false,
      })
    }

    handleCancel = () => {
      this.setState({
        visible: false
      })
    }

    render() {
        return (
          <div className="top_header">
            <div className="logo">
                <Link to="/index/start/home">
                  <img src={logo1} height={40} className="logo_item" />
                  <img src={logo2} height={40} className="logo_item" />
                  <img src={logo3} height={35} className="logo_item" />
                </Link>
            </div>
            <div className="user">
              <MailOutlined style={{ fontSize:'15px', color:'#fff' }} />
              <a onClick={mail} className="icon_font">邮箱</a>
              <WechatOutlined style={{ fontSize:'15px', color:'#fff' }} />
              <a onClick={wechat} className="icon_font">微信</a>
              <Avatar size={32} icon={<UserOutlined />} />
              <Dropdown
                overlay={
                  <Menu>
                    <Menu.Item key="0">
                      <Link to={{ pathname: '/index/person', state: { username: this.state.username }}}>个人中心</Link>
                    </Menu.Item>
                    <Menu.Item key="1">
                      <Link to="/index/use">使用手册</Link>
                    </Menu.Item>
                    <Menu.Divider />
                    <Menu.Item key="3" onClick={this.logout}>退出登录</Menu.Item>
                    <Modal
                      title="退出登录"
                      visible={this.state.visible}
                      onOk={this.handleOk}
                      onCancel={this.handleCancel}
                      okText={"确定"}
                      cancelText={"取消"}
                    >
                      <p style={{color:'#fff'}}>是否要退出当前账号？</p>
                    </Modal>
                  </Menu>
                }
                trigger={['click']}
              >
                <a className="ant-dropdown-link username" onClick={e => e.preventDefault()}>
                  {this.state.username} <DownOutlined />
                </a>
              </Dropdown>
            </div>
          </div>
        )
    }
}